<template>
  <div>
    <div class="inputsea  clearfix">
      <div v-for="(item,i) in opts" class="item el-tag--primary ">
        <div class="fl">
          <span class="searchLabel">{{item.label}}&nbsp;</span>
        </div>
        <div class="fl">
          <el-select v-if="item.type=='sel'"
                     size="mini"
                     v-model="item.val"
                     placeholder="请选择"
                     @change="pushDateTop(item.key)">
            <el-option v-for="o in item.selOption" :label="o.label" :value="o.value"></el-option>
          </el-select>

          <el-date-picker
            v-if="item.type=='date'"
            v-model="item.val"
            type="date"
            size="mini"
            placeholder="选择日期"
            @change="pushDateTop(item.key)"
            :picker-options="pickerOptions">
          </el-date-picker>

          <el-date-picker
            v-if="item.type=='datetimerange'"
            v-model="item.val"
            type="datetimerange"
            size="mini"
            @change="pushDateTop(item.key)"
            placeholder="选择时间范围">
          </el-date-picker>

          <!--文本-->
          <el-input v-if="item.type == ''"
                    style="width: inherit"
                    size="mini"
                    v-model="item.val"
                    placeholder="请输入内容"
                    @change="querySearchAsync">
          </el-input>
        </div>
        <div class="fl">
          <i class="el-icon-close icon" @click="rmItemInSearch(i)"></i>
        </div>
      </div>
      <!--<el-button type="text" icon="plus" :disabled="addButStatus" @click="showSL = true"></el-button>-->
      <!--<div  class="item el-tag el-tag&#45;&#45;primary" @click="showSL = true">添加</div>-->
      <div class="handleWarn">
        <i @click="addBt" class="bt el-input__icon el-icon-plus" style="margin-right: 30px;"></i>
        <i @click="rmAllItem" class="bt el-input__icon el-icon-close"></i>
      </div>
    </div>
    <div class="el-select-dropdown selectdro" v-show="showSL">
      <el-col :span="24" v-for="(item,i) in comOpts">
        <div v-show="keyOpts.indexOf(item.key)>-1"
             class="selectdroitem"
             @click="addItemInSearch(item)">
          {{item.label}}
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
//  abc
  //	import util from '../../common/util'

  export default {
    components: {},
    props: {
      allOpts: {
        type: Array,
        default: function () {
          return [{
            key: 'name',
            label: '名称',
            type: '',
            val: ''
          }, {
            key: 'type',
            label: '类型',
            type: 'sel',
            selOption: [{
              label: "类型1",
              value: "1"
            }, {
              label: "类型2",
              value: "2"
            }],
            val: ''
          }, {
            key: 'startDate',
            label: '开始时间',
            type: 'date',
            val: ''
          }]
        }
      },
      value: {
        type: Array,
        default: function () {
          return [{
            key: 'startDate',
            label: '开始时间',
            type: 'date',
            selOption: [],
            val: ''
          }]
        }
      }
    },
    data() {
      return {
        timeout: null,
        // myallOpts:this.myallOpts||[],
        showSL: false,
        form: {},
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
//            return time.getTime() > Date.now() - 8.64e7;
          }
        },
        comOpts: this.allOpts,
        keyOpts: [],
        opts: this.value,
        addButStatus: false,
        inputNum: 0
      }
    },
    watch: {},
    methods: {
      pushDateTop: function (key) {
        this.$emit('input', this.opts);
        this.$emit('change', this.opts);
        this.$emit('blur', this.opts);
        this.$emit('getChangeItem', {
          val: this.opts, key
        });
      },
      rmAllItem: function () {
        this.opts = [];
        this.SearchInit();
        this.pushDateTop();
      },
      rmItemInSearch: function (i) {
        this.opts.splice(i, 1);
        this.inputNum--;
        this.SearchInit();
        this.pushDateTop();
      },
      addItemInSearch(obj){
        this.showSL = false;
        this.inputNum++;
        let tmp = {
          key: obj.key,
          label: obj.label,
          type: obj.type,
          selOption: obj.selOption,
          val: obj.val
        }
        this.opts.push(tmp);
        this.SearchInit();
        this.pushDateTop();
      },
      SearchInit(){
        let optsKey = [];
        let comOptsKey = [];
        this.opts.map(item => {
          optsKey.push(item.key);
        });
        this.comOpts.map(item => {
          let index = optsKey.indexOf(item.key);
          if (index === -1) {
            comOptsKey.push(item.key);
          }
        });
        this.keyOpts = comOptsKey;
        this.changeAddDisable();
      },
      changeAddDisable(){
        if (this.keyOpts.length === 0) {
          this.addButStatus = true;
        } else {
          this.addButStatus = false;
        }
      },
      querySearchAsync(){
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.pushDateTop()
        }, 3000 * Math.random());
      },
      addBt: function(){
        if(this.allOpts.length != this.value.length) this.showSL = true
      },
    },
    mounted () {
      this.SearchInit();


    },
    beforeDestory () {
      console.log("beforeDestory");
    }
  }
</script>

<style scoped>
  .selectdro {
    min-width: 280px;
    text-align: center;
    color: #475669;
  }

  .selectdroitem:hover {
    background: #e5e9f2;
    cursor: pointer;
  }

  .inputsea {
    height: auto;
    min-height: 35px;
    padding: 0px 55px 0 10px;
    border-radius:4px;
    border: 1px solid #c4c4c4;
  }

  .input-body {
    padding-right: 60px;
  }

  .item {
    box-sizing: border-box;
    float: left;
    height: 31px;
    padding: 4px 5px 0 5px;
    margin: 2px 5px 2px 0;
    font-size: 12px;
    line-height: 25px;
    border-radius: 5px;
  }

  .item i {
    margin-left: 5px;
    font-size: 12px;
  }

  .item input {
    border: none;
    outline: none;
  }

  .ul li {
    list-style-type: none;
  }

  .fl {
    float: left;
  }

  .searchLabel {
    min-width: 4em;
  }
  .el-input {
    min-width: 193px;
  }
  .handleWarn .bt:hover{
    color: #13ce66;
    cursor:pointer;
  }
  .handleWarn .bt:nth-child(2):hover{
    color: #ff4949;
  }
  .handleWarn .bt{
    width: 30px;
    font-size: 12px;
  }

</style>